<script lang="tsx">
import {
  ElPagination,
  ElConfigProvider
} from 'element-plus'
import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import zhcn from 'element-plus/dist/locale/zh-cn.mjs'
import type {Pagination, TableProps} from '../types'

export default defineComponent({
  name: 'EPagination',
  props: {
      pageSize: propTypes.number.def(10),
      currentPage: propTypes.number.def(1),
      show: propTypes.bool.def(true),
      // 是否展示分页
      pagination: {type: Object as PropType<Pagination>, default: (): Pagination | undefined => undefined },
  },
  emits: ['update:pageSize', 'update:currentPage'],
  setup(props, {  emit }) {

    // 注册
    onMounted(() => {

    })
    zhcn.el.pagination.goto = '第'

    const pageSizeRef = ref(props.pageSize)

    const currentPageRef = ref(props.currentPage)
     const mergeProps = ref<TableProps>({})
      const getProps = computed(() => {
          const propsObj = { ...props }
          Object.assign(propsObj, unref(mergeProps))
          return propsObj
      })
    const pagination = computed(() => {
      return Object.assign(
        {
          small: false,
          background: false,
          pagerCount: 6,
          layout: 'total, ->, page, jumper, prev, pager, next,  sizes',
          pageSizes: [10, 20, 30, 40, 50, 100],
          disabled: false,
          hideOnSinglePage: false,
          total: 10
        },
          unref(getProps).pagination
      )
    })

    watch( () => unref(getProps).pageSize, (val: number) => {
        pageSizeRef.value = val
      })

    watch(() => unref(getProps).currentPage,(val: number) => {
        currentPageRef.value = val
      })

    watch(() => pageSizeRef.value,(val: number) => {
        emit('update:pageSize', val)
      })

    watch( () => currentPageRef.value, (val: number) => {
        emit('update:currentPage', val)
      })
      return () => {
          return (<>
                  {unref(getProps).show?(
                      <ElConfigProvider v-model:locale={zhcn}>
                          <ElPagination
                              v-model:pageSize={pageSizeRef.value}
                              v-model:currentPage={currentPageRef.value}
                              class="mt-10px"
                              {...unref(pagination)}
                          ></ElPagination></ElConfigProvider>
                      ):''}
              </>
          )
      }
  }
})
</script>
<style lang="less">

.el-pagination {
    --el-pagination-font-size: 13px;

    .el-select {
        width: 100px;
    }
    .el-input--default{
        height: 24px;
        width: 50px;
    }

    .el-pagination__editor {

        .el-input__wrapper {
            padding: 1px 4px;
        }
    }

    .el-select--small .el-select__wrapper {
        gap: 4px;
        padding: 2px 4px;
        min-height: 24px;
        line-height: 20px;
        font-size: 12px;
    }
    .el-select__wrapper{
        box-shadow: none;
        font-size: 13px;
    }
    .el-select__wrapper.is-hovering:not(.is-focused){
        box-shadow: none;
    }
}
</style>
<style scoped>

</style>